<template>
  <div id="app">
    <div class="btnlist">
      <button @click="btnone">1</button>
      <button @click="btntwo">2</button>
      <button @click="btntrewe">3</button>
      <!-- <a href="/Jsq">按钮</a> -->
    </div>
    <div class="imglist">
      <img v-show="isShow" class="i1" src="../../public/images/a.jpg" alt />
      <img v-show="isThow" class="i2" src="../../public/images/b.jpg" alt />
      <img v-show="isWash" class="i3" src="../../public/images/c.jpg" alt />
    </div>
  </div>
</template>
<script>
export default {
  // name: "HomePage",
  data() {
    return {
      isShow: false,
      isThow: false,
      isWash: false
    };
  },
  methods: {
    btnone() {
      this.btn1 = this.i1;
      this.isShow = !this.isShow;
      this.isThow = false;
      this.isWash = false;
    },
    btntwo() {
      this.btn2 = this.i2;
      this.isThow = !this.isThow;
      this.isWash = false;
      this.isShow = false;
    },
    btntrewe() {
      this.btn3 = this.i3;
      this.isWash = !this.isWash;
      this.isShow = false;
      this.isThow = false;
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

button {
  width: 150px;
  height: 150px;
}

img {
  width: 300px;
  height: 300px;
}

.i2 {
  display: block;
}

.i3 {
  display: block;
}
.btnlist {
  width: 450px;
  height: 150px;
}
.imglist {
  width: 450px;
  height: 300px;
}
</style>